<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>yukari world</title>
<#include "/lib/base_source.ftl">
<style type="text/css">
</style>
</head>
<body>
<div class='whole-container'>
<#include "/lib/header.ftl">
    <div>
        <ul class="breadcrumb">
        	<li>签到管理</li><span class="divider">/</span>
            <li>签到列表</li>
        </ul>
    </div>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="container span12">
            <#include "/lib/alert.ftl">

                <div class='main-content'>
                    <div class="well form-inline">
                        <div class='main-action'>
                    		<a class="btn btn-info" href="javascript:startRegister();">开始签到</a>
                    		<a class="btn btn-info" href="javascript:stopRegister();">结束签到</a>
                        </div>
                    </div>
                    
                    <div class="table-content">
                    <#-- table -->
                        <table class="table table-striped table-bordered table-condensed" id="itemTable" style="font-size:12px;word-break:break-all;word-wrap:break-word;">
                            <thead>
                            <tr >
                                <th style="width:180px;">名字</th>
                                <th style="width:100px;"><span>赐名</span><span class="glyphicon glyphicon-chevron-left" style="float:right;" onclick="showTd(1)"></span></th>
                                <th style="width:300px;text-align:center;"><span class="glyphicon glyphicon-chevron-right" style="float:left;" onclick="showTd(-1)"></span><span>操作</span></th>
                            </tr>
                            </thead>
                            <tbody>
                            <#if authList??>
                            <#list authList as item>
                            	<tr id="${item.id?c}" >
                                	<td style="line-height:34px;">${item.name!}</td>
                                	<td style="line-height:34px;"><span>${item.nickName!}</span><span class="glyphicon glyphicon-chevron-left" style="float:right; margin-top:10px;" onclick="showTd(1)"></span></td>
                                	<td style="line-height:34px;">
                                	<span class="glyphicon glyphicon-chevron-right" style="float:left; margin-top:10px;" onclick="showTd(-1)"></span>
                                	<span style="float:right">
                                	</span>
                                	</td>
                                </tr>
                            </#list>
                            </#if>
                            </tbody>
                        </table>
                        <div class="pagination" id="itemPage"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>

    $(document).ready(function(){
    	showStatus(0);
    });
	    
	function startRegister(){
		location.href = "${rc.contextPath}/admin/register/startRegister";
	}
	function stopRegister(){
		location.href = "${rc.contextPath}/admin/register/stopRegister";
	}
	
	
	function showTd(i){
		var ii = $("th[class=register]:visible:last").attr("data_index");
		showStatus(parseInt(ii)+i);
	}
	
	var trs = $("tr");
	var authIds = "";
	for ( var i = 1; i < trs.length; i++) {  
		authIds = authIds + ","+$(trs[i]).attr("id");
	}
	authIds = authIds.substring(1);
	
	var showStatus_ajax_flag = true;
	
	function showStatus(ii){
		if (ii < 0){
			return;
		}
		var end = ii+9;
		//请求新的td
		if ($("th[data_index="+(end)+"]").length == 0){
			var start = 0;
			if (ii != 0){
				start = end;
			}
			if (showStatus_ajax_flag){
				showStatus_ajax_flag = false;
				$.ajax({
					url : "${rc.contextPath}/admin/register/getAuthStatus",
			    	dataType : "json",
			    	data :  {'authIds':authIds,'start':start},
			    	type:'post',
			    	async: false,
			    	success:function(json){
			    		var registerList = json.data.registerList;
			    		var authRegisterList = json.data.authRegisterList;
			    		for ( var i = 0; i < registerList.length; i++) {
			    			var t = $("th[class=register]").length;
			    			var register = registerList[i];
			    			var th = $('<th style="text-align:center;width:100px;display:none;" class="register" data_index="'+t+'">'+showDate(register.startTime)+'</th>')  
			    			$("th").eq(1).after(th);
			    			for ( var j = 0; j < authRegisterList.length; j++) {
			    				var authId = authRegisterList[j].authId;
			    				var status = authRegisterList[j].statusList[i];
			    				var td = $('<td style="text-align:center;width:100px;display:none;" class="register" data_index="'+t+'"></td>');
			    				if (status == 0){
			    					td.html($('<img src="${rc.contextPath}/images/qiandao_64.png" style="width:32px">'))
			    				} else if (status == 1){
			    					td.html($('<img src="${rc.contextPath}/images/chidao_32.png" style="width:16px">'))
			    				}
			    				$("#"+authId+" td").eq(1).after(td);
			    			}
			    			if (registerList.length == 10){
			    				showStatus_ajax_flag = true;
			    			}
						}
			    	}
				});
			}
		}
		//请求结束
		
		//显示
		$(".register").hide();
		var c = 0;
		var i = 0;
		while(c<10){
			var show = $('.register[data_index='+(end-i)+']');
			if (show.length != 0){
				show.show();
				c++;
			}
			i++;
		}
	}
	
	function showDate(time){
		if (time == ""){
			return "";
		}
		var year = time.year+1900;
		var month = time.month+1;
		var day = time.date;
		return year+'-'+buling(month)+'-'+buling(day);
	}
	function buling(a){
		if (a < 10){
			return "0"+a;
		} else {
			return a;
		}
	}

</script>
</body>
</html>